<!-- 城市级联 -->
<template>
	<div class="cascade_bg" v-if="showCascade" :class="showCascade ? 'isHide': ''">
		<div class="close" @click="close"></div>
		<div class="cascade">
			<ul class="identical-select first-other" v-show="showFirstSelect">
				<li v-for="(item, index) in firstData" :key="index" @click.stop="firstSelect(item)">
					{{item.ssqname}}
				</li>
			</ul>
			<ul class="identical-select second-other" v-show="showSecondSelect">
				<li v-for="(item, index) in secondData" :key="index" @click.stop="secondSelect(item)">
					{{item.ssqname}}
				</li>
			</ul>
			<ul class="identical-select three-other" v-show="showThreeSelect">
				<li v-for="(item, index) in threeData" :key="index"  @click.stop="threeSelect(item)">
					{{item.ssqname}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import cityData from './js/city.js'
export default {
    name: 'y-citycurtain',
    data () {
        return {
            firstData: [],
            secondData: [],
            threeData: [],
            showFirstSelect: true,
            showSecondSelect: false,
            showThreeSelect: false,
            firstName: '',
            secondName: '',
            threeName: '',
            allName: '',
			showCascade: false,
        }
    },
    mounted () {
		this.firstData = cityData.province
    },
    methods: {
        // 点击第一列的数据
        firstSelect (data) {
            this.showSecondSelect = true
            this.secondData = data.cities.city
            this.firstName = data.ssqname
        },

        // 点击第二列的数据
        secondSelect (data) {
            this.showThreeSelect = true
            this.threeData = data.areas.area
            this.secondName = data.ssqname
        },

        // 点击第三列的数据
        threeSelect (data) {
            this.threeName = data.ssqname
            // this.$emit("confirm", this.threeName)
			this.$store.commit('selectCity', this.threeName)
			this.hideCurtain()
        },
		
		// 显示幕布
		showCurtain() {
			this.showCascade = true
		},
		
		// 隐藏幕布
		hideCurtain() {
			this.showCascade = false
		},
		
		// 关闭
		close() {
			this.hideCurtain()
		}
    },
}
</script>

<style lang="scss" scoped>
    $gray: #e8e0e0;
	.cascade_bg {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 999;
		animation: mycurtain 2s;
		.close {
			position: absolute;
			color: #c1bcbc;
			text-align: center;
			height: 80rpx;
			width: 80rpx;
			line-height: 80rpx;
			font-size: 20px;
			padding: 1px;				
			&:after {
				content: "\2716";
			}
		}
		.cascade {
			position: absolute;
			width: 100%;
			height: 100%;
			margin-top: 80rpx;
			animation: mycurtain 2s;
		    .input-style {
		        width: 100%;
		        height: 70rpx;
		        line-height: 70rpx;
		        padding: 0 10rpx;
		        border: 1rpx solid $gray;
		        border-radius: 20rpx;
		        font-size: 16rpx; /*no*/
		        outline: none;
		        &:focus {
		            border: 1rpx solid #00c0ff;  /*no*/
		        }
		    }
		
		    // 下拉选择
		    .identical-select {
		        width: 33%;
				height: 100%;
		        border: 1px solid $gray;    /*no*/
		        text-align: center;
		        font-size: 14px; /*no*/
				overflow-y: scroll;
		        li {
		            height: 100rpx;
		            line-height: 100rpx;
		            border-top: 0;
		            cursor: pointer;
		            color: #3c3a3a;
		        }
		    }
		    .first-other {
		        position: absolute;
		        left: 0;
		        top: 0;
		    }
		    .second-other {
		        position: absolute;
		        left: 33%;
		        top: 0;
		    }
		    .three-other {
		        position: absolute;
		        left: 33% * 2;
		        top: 0;
		    }
		}
	}
	.isHide {
		animation: hidecurtain 2s;
	}
    
    .identical-select::-webkit-scrollbar {/*滚动条整体样式*/
        width: 20rpx;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 2rpx;
    }
    .identical-select::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 20rpx;
        box-shadow: inset 0 0 10rpx $gray;
        background: #c7c3c3;
    }
    .identical-select::-webkit-scrollbar-track {/*滚动条里面轨道*/
        box-shadow: inset 0 0 10rpx $gray;
        border-radius: 20rpx;
        background: #EDEDED;
    }
	
	@keyframes mycurtain
	{
		0%   {height: 0;}
		100% {height: 100%;}
	}
	
	@keyframes hidecurtain
	{
		100% {height: 100%;}
		0%   {height: 0;}
	}
</style>